<template>
  <div class="drawer">
    <el-drawer :visible.sync="drawer" :direction="direction"  size="40%">
      <p class="dangerInfo">隐患详情</p>
      <div class="dangerInfoMain">
        <p>
          <span style="width:auto;text-align:left">所属项目：
             <span style="width:auto;display:inline">{{ dangerInfo.projectName }}</span>
          </span>
        <p>
          <span>隐患位置：</span>
          <span>{{ dangerInfo.safeAd }}</span>
        </p>
        <p>
          <span>隐患描述：</span>
          <span>{{ dangerInfo.safeContent }}</span>
        </p>
        <p>
          <span>上传人：</span>
          <span>{{ dangerInfo.username }}</span>
        </p>
        <p>
          <span>上传时间：</span>
          <span>{{ dangerInfo.uploadTime | dateFormat }}</span>
        </p>
      </div>
      <div class="carousel">
        <swiper :imgList="dangerInfo.photoUrl"></swiper>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { dangerInfo } from '@/api/danger'
import moment from 'moment'

export default {
  data () {
    return {
      drawer: false,
      direction: 'rtl',
      dangerInfo: ''
    }
  },
  filters: {
    dateFormat: function (dateStr) {
      return moment(dateStr).format('YYYY-MM-DD HH:mm')
    }
  },
  methods: {
    openDrawer (safeId) {
      this.drawer = true
      // console.log(safeId)
      dangerInfo(safeId).then(async res => {
        // console.log(res)
        if (res.data.code === 200) {
          const srcList = res.data.data.photoUrl.split(',')
          const photoUrl = []
          for (let i = 0; i < srcList.length; i++) {
            photoUrl.push(await this.$_makeMediaSrc(Number(srcList[i])))
          }
          res.data.data.photoUrl = photoUrl
          this.dangerInfo = res.data.data
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    }
    // handleClose (done) {
    //   this.$confirm('确认关闭？')
    //     .then(_ => {
    //       done()
    //     })
    //     .catch(_ => {})
    // }
  }
}
</script>

<style scoped lang="scss">
.drawer {
  .dangerInfo {
    height: 60px;
    background-color: rgba(87, 131, 255, 0.05);
    color: #333333;
    line-height: 60px;
    font-size: 16px;
    padding-left: 30px;
  }
  .dangerInfoMain {
    height: 330px;
    padding-left: 132px;
    padding-top: 25px;
    p {
      // height: 52px;
      line-height: 52px;
      font-size: 16px;
      span {
        display: inline-block;
        &:first-child {
          width: 84px;
          text-align: right;
        }
      }
      .green {
        color: #2ebb25;
      }
    }
  }
  .carousel {
    // background-color: #000000;
    // width: 85%;
    // margin: 0 auto;
    height: 300px;
    .el-carousel__item {
      text-align: center;
      img {
        height: 300px;
      }
    }
  }
}
</style>
